<template>
    <div class="make">
        <div class="make-container">
            <div class="make-preview">
                <div class="image-edit" ref="image">
                    <!--<img :src="imageDataUrl">-->
                    <img class="bg-image" :src="backgroundUrl">
                    <div class="overlay">
                        <div class="sprite"
                             v-for="(sprite, i) in makeTemplate.sprites"
                             :style="getSpriteStyle(sprite)"
                             :class="{'active': i === activeSpriteIndex, 'variable': sprite.type === 'variable'}"
                             @mousedown="spriteMouseDown($event, i)"
                             @click="activateSprite(i)">
                            <div class="text" v-if="sprite.type === 'text'" v-html="sprite.content"></div>
                            <div class="variable" v-if="sprite.type === 'variable'" v-html="sprite.content"></div>
                            <div class="picture" v-if="sprite.type === 'picture'">
                                <img :src="sprite.imageSrc">
                            </div>
                            <div class="resizers" v-show="i === activeSpriteIndex && sprite.type === 'picture'">
                                <div class="resizer nw"></div>
                                <div class="resizer ne"></div>
                                <div class="resizer sw"></div>
                                <div class="resizer se"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="editor">
                <div class="fixed-fields">
                    <ul>
                        <li class="field"
                            v-for="(field, i) in variables"
                            :class="{'disabled': variableExist(i)}"
                            @click="addVariable(i)">
                            {{field.placeholder}}
                        </li>
                    </ul>
                </div>
                <br>
                <div class="editor-container">
                    <div id="editor"></div>
                </div>
                <br>
                <div class="buttons">
                    <Button type="primary" @click="addText">添加文字</Button>
                    <Button type="primary" @click="removeSprite" :disabled="activeSpriteIndex === -1">删除</Button>
                    <Button type="primary" @click="save">保存</Button>
                </div>
            </div>
        </div>
    </div>
</template>

<script src="./make.js"></script>
<style lang="less" src="./make.less"></style>